<template>
  <div id="rightbannar">
    <div class="img">
      <el-carousel height="280px">
        <el-carousel-item v-for="item in imgtotle" :key="item">
          <img :src="item" height="280" width="820"/>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="tody">
      <p>
        <svg class="pIcon icon" aria-hidden="true">
          <use xlink:href="#iconxingxing"></use>
        </svg>
        <span>今天看什么</span>
      </p>
    </div>
    <div class="item">
     <table>
       <tr v-for="(item,index) in list" :key="index" :index="index">
         <td class="linktd" @click="gotoArticle(item.aid)"><el-link :underline="false"><strong style="color: #4c7aac;">[{{item.areaName}}]</strong><span>&nbsp;&nbsp;{{item.title}}</span></el-link></td>
       </tr>
     </table>
    </div>
  </div>
</template>

<script>
  import bg0 from '../../../static/img/bg0.png'
  import bg1 from '../../../static/img/bg1.png'
  import bg2 from '../../../static/img/bg2.png'
  import bg3 from '../../../static/img/bg3.png'
  import bg4 from '../../../static/img/bg4.png'
  import bg5 from '../../../static/img/bg5.png'
  export default {
    name: "RightBannar",
    data () {
      return {
        imgtotle: [
          bg0,bg1,bg2,bg3,bg4,bg5
        ],
        list: []
      }
    },
    mounted () {
      this.$http({
        url: '/article/whatsNewTodayArticleList',
        method: 'post'
      }).then(res =>{
        this.list = res.data
      }).catch(err =>{
        console.log(err);
      })
    },
    methods: {
      gotoArticle (aid) {
        this.$router.push('/article/'+aid)
      }
    }

  }
</script>

<style scoped>
  table{
    padding: 2px;
    width: 100%;
    line-height: 2.4;
    font-size: 16px;
  }
  td {
    border-bottom: 1px solid #beaeae;
  }
  #rightbannar{
    width: 820px;
    height: 550px;
  }
  #rightbannar .img{
    height: 280px;
  }
  #rightbannar .tody{
    margin: 10px 0;
    height: 60px;
    border: 1px solid #beaeae;
    background-color: #ffffff;
  }
  #rightbannar .item{
    height: 180px;
    background-color: #ffffff;
    border: 1px solid #beaeae;
  }
  #rightbannar .pIcon{
    font-size: 16px;
    width: 60px;
    height: 60px;
  }
  .tody p{
    margin: 0;
    height: 60px;
  }
  .tody p span{
    position: absolute;
    top: 430px;
    left: 610px;
    font-size: 28px;
  }
  /deep/ .el-link.el-link--default:hover {
    /*color: rgb(76, 122, 172);*/
  }
</style>
